<template>
  <div class="main">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-input
          style="width:300px"
          placeholder="请输入搜索的内容"
          v-model="selectInput"
          clearable>
        </el-input>
        <div style="margin-left: 75%;">
          <el-button type="primary" icon="el-icon-refresh" @click="refresh"></el-button>
        </div>
      </div>
      <div class="text item">
        <el-table
          :data="tableData"
          border
          stripe
          v-loading="tableLoading"
          style="width: 100%;text-align:center"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            align="center"
            width="55">
          </el-table-column>
          <el-table-column
            prop="customer"
            align="center"
            label="顾客"
            width="220">
          </el-table-column>
          <el-table-column
            prop="business"
            align="center"
            label="商家"
            width="220">
          </el-table-column>
          <el-table-column
            prop="rider"
            align="center"
            label="骑手"
            width="220">
          </el-table-column>
          <el-table-column
            prop="date"
            align="center"
            label="日期"
            width="220">
          </el-table-column>
          <el-table-column
            prop="price"
            align="center"
            label="价格"
            width="200">
          </el-table-column>
          <el-table-column
            prop="status"
            align="center"
            label="状态"
            width="250">
            <template slot-scope="scope">
              <span v-if="scope.row.status === 'false'" style="color:red">未完成</span>
              <span v-else style="color:green">已完成</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="action"
            align="center"
            label="操作">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="deleteCustomer(scope.row.accounts)"
                type="danger"
                size="small"
                icon="el-icon-delete">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top:15px;display:flex;justify-content: center;align-items: center;">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="20"
            layout="total, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </el-card>
    <el-dialog
      title="删除顾客"
      :visible.sync="deleteDialogVisible"
      width="500px">
      <span>确定要删除此顾客吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false" icon="el-icon-close">取 消</el-button>
        <el-button type="primary" @click="sureDeleteCustomer" icon="el-icon-check">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getOrderInfo } from "@/api/order"
export default {
  name: "customer",
  data() {
    return{
      selectInput: "",
      currentPage: 1,
      total: 0,
      tableLoading: false,
      tableData:[],

      form:{
        accounts: "",
        password: "",
        username: "",
        telephone: "",
        email: "",
        gender: ""
      },

      deleteDialogVisible:false,
      deleteAccounts: "",
        
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    timestampToTime(timestamp) {
      let date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + '-';
      let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
      let D = date.getDate() + ' ';
      let h = date.getHours() + ':';
      let m = date.getMinutes() + ':';
      let s = date.getSeconds();
      return Y+M+D+h+m+s;
    },
    init() {
      this.tableLoading = true;
      getOrderInfo().then((res)=> {
        this.tableData = res.data
        for (let i in this.tableData) {
          let k = this.timestampToTime(new Date(this.tableData[i].date).getTime())
          this.tableData[i].date = k;
        }
        this.total = res.data.length;
        this.tableLoading = false;
      })
    },
    refresh() {
      this.init();
    },
    // 删除订单
    deleteCustomer(accounts) {
      this.deleteDialogVisible = true;
      this.deleteAccounts = accounts;
    },
    sureDeleteCustomer(){
      deleteCustomer(this.deleteAccounts).then((res)=>{
        this.deleteDialogVisible = false;
        this.refresh()
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  },
};
</script>
<style scoped>
  .main {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }
  .clearfix{
    display: flex;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 95%;
    border-radius: 5px;
    margin-top: 10px;
    min-height: 800px;
  }
  .el-drawer__header span:focus {
    outline: 0;
  }
  .drawerInput {
    height: 25px;
    width: 200px;
  }
  .el-divider--horizontal{
    margin:10px 0 !important;
  }
  .el-form-item{
    margin-bottom: 0px !important;
  }
  .el-dialog{
    width: 480px!important;
  }
</style>
